<template>
  <div class="tabpage">
    <Top></Top>
    {{tabid}}
    <div class="tab">
      <van-tabs v-model="active">
        <van-tab title="设计软件"><Comn1></Comn1></van-tab>
        <van-tab title="手绘插画"><Comn2></Comn2></van-tab>
        <van-tab title="视频制作"><Comn3></Comn3></van-tab>
        <van-tab title="摄影修片"><Comn4></Comn4></van-tab>
        <van-tab title="设计技能"><Comn5></Comn5></van-tab>
      </van-tabs>
    </div>
    <!-- <component :is="com"></component> -->
  </div>
</template>

<script>
import Top from "./comntop.vue"
import Comn1 from "./comnpage1.vue";
import Comn2 from "./comnpage2.vue";
import Comn3 from "./comnpage3.vue";
import Comn4 from "./comnpage4.vue";
import Comn5 from "./comnpage5.vue";
import { Tab, Tabs } from "vant";
export default {
  props:{
    tabid:{
      type:String,
      defult:"0"
    }
  },
  watch:{
    
  },
  components: {
    Top,
    Comn1,
    Comn2,
    Comn3,
    Comn4,
    Comn5,
    [Tab.name]:Tab,
    [Tabs.name]:Tabs
  },
   data() {
    return {
      active: Number(this.tabid),
    };
  }
};
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}
#tabpage {
  width: 100%;
}
.tab {
  width: 100%;
  height: 0.3rem;
  margin-top: 0.5rem;
}
.tab ul {
  width: 100%;
  height: 0.3rem;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  overflow: auto;
}
.tab ul li {
  width: 25%;
  height: 100%;
  float: left;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.14rem;
  line-height: 0.3rem;
}
</style>
